<template>
  <div>
    <el-row>
      <el-col>
        <!-- 放搜索条件 -->

        <el-form :inline="true" :model="drugDistributionParam" class="demo-form-inline">
          <el-form-item label="申请编号">
            <el-input v-model="drugDistributionParam.ppNo" placeholder="请输入编号" @change="queryCondition"></el-input>
          </el-form-item>
          <el-form-item label="病人姓名">
            <el-input v-model="drugDistributionParam.patientName" placeholder="请输入姓名" style="width: 100px;" @change="queryCondition"></el-input>
          </el-form-item>
          <el-form-item label="医生姓名">
            <el-input v-model="drugDistributionParam.docName" placeholder="请输入姓名" style="width: 100px;" @change="queryCondition"></el-input>
          </el-form-item>

          <el-form-item label="缴费情况">
            <el-select v-model="drugDistributionParam.ppStatus" placeholder="请选择" @change="queryCondition">
              <el-option value="0" label="刚创建"></el-option>
              <el-option value="1" label="缴费"></el-option>
              <el-option value="2" label="已完成"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="病人状态">
            <el-select v-model="drugDistributionParam.ppType" placeholder="请选择" @change="queryCondition">
              <el-option value="0" label="门诊"></el-option>
              <el-option value="1" label="住院"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>

            <el-button type="info" icon="el-icon-circle-close" @click="remove">清空</el-button>
          </el-form-item>

        </el-form>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <!-- 放数据部分 -->
        <el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="ppNo" label="申请编号" width="180">
          </el-table-column>
          <el-table-column prop="patientName" label="姓名" width="150" align="center">
          </el-table-column>
          <el-table-column prop="docName" label="开药医生" width="150" align="center">
          </el-table-column>
          <el-table-column prop="ppDate" label="开药时间" width="150" align="center">
          </el-table-column>
          <el-table-column prop="ppStatus" label="缴费情况" align="center">
            <template slot-scope="scope">
              <span>
                {{ statusList.boolean[scope.row.ppStatus]}}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="ppType" label="病人状态" align="center">
            <template slot-scope="scope">
              <span>
                {{ scope.row.ppType == "0" ? '门诊' : '住院' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="药品" width="180" align="center">
            <template slot-scope="scope">
              <el-button @click="drugDetailPage(scope.row.ppNo)">查看药品</el-button>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="180" align="center">
            <template slot-scope="scope">


              <el-button v-if="scope.row.ppStatus == 0 && scope.row.ppType == 0">未缴费</el-button>
                  
              <el-button v-if="(scope.row.ppType == 1 && scope.row.ppStatus !=2 ) || scope.row.ppStatus == 1" type="warning" icon="el-icon-s-promotion" @click="updateDrugStatus(scope.row.id)">发药</el-button>
              <el-button v-if="scope.row.ppStatus == 2 " type="primary">已完成</el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <el-row>
      <el-col>
        <!-- 放分页 -->

        <el-pagination background :current-page="pageNum" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next" @next-click="nextPage" @prev-click="prevPage"
          @size-change="changeSize" @current-change="changeCurrent" :total="total">
        </el-pagination>
      </el-col>
    </el-row>





    <!-- 查看界面 -->
  
    <el-dialog title="查看药品" :visible.sync="drugDetailInfoVisible">
      <el-row>
        <el-col>
          <el-table :data="drugDetailList" :header-cell-style="{ 'text-align': 'center' }" style="width: 100%; ">
          <el-table-column prop="mdName" label="药名" width="180">
          </el-table-column>
          <el-table-column prop="mdNum" label="数量" width="150" align="center">
          </el-table-column>
          <el-table-column prop="mdBuyPrice" label="价格" width="150" align="center">
          </el-table-column>
          
        </el-table>
        </el-col>
      </el-row>
      </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drugDetailInfoVisible: false,
      drugDistributionParam: {},
      pageNum: 1,
      pageSize: 5,
      total: 0,
      tableData: [],
      drugDetailList:[],
      ppNo:'',
      statusList : {boolean: {0: '未缴费', 1: '已缴费', 2: '已完成'}}
    }
  },
  methods: {
    nextPage(val) {
      //用户点击下一页触发
      this.pageNum = val;
      this.queryDrugDistribution();
    },
    prevPage(val) {
      //用户点击上一页触发
      this.pageNum = val;
      this.queryDrugDistribution();
    },
    changeSize(val) {
      //改变每页显示的条数
      this.pageNum = 1;
      this.pageSize = val;
      this.queryDrugDistribution();
    },
    changeCurrent(val) {
      this.pageNum = val;
      this.queryDrugDistribution();
    },
    //搜索按钮
    queryCondition() {
      this.pageNum = 1;
      this.queryDrugDistribution();
    },
    //查询开药列表
    queryDrugDistribution() {
      let pageParm = {};
      pageParm.pageNum = this.pageNum;
      pageParm.pageSize = this.pageSize;
      pageParm.param = this.drugDistributionParam;

      this.$axios.post('api/drugDistribution/queryDrugDistribution', pageParm)
        .then(res => {
          if (res.data.code === 200) {
            
            let parm = res.data.data;
            this.tableData = parm.list;
            this.total = parm.total;
          } 
        })
    },
    //清空
    remove(){
      this.drugDistributionParam = {}
    },
    //查看药品详情界面
    drugDetailPage(ppNo){
      this.ppNo = ppNo;
      this.queryDrug();
      this.drugDetailInfoVisible = true;
    },

    //查询药品详情
    queryDrug(){
      this.$axios.get('api/drugDistribution/queryDrug/'+this.ppNo)
      .then(res=>{
        if(res.data.code === 200){
          this.drugDetailList = res.data.data;
        }
      })
    },
    //发药
    updateDrugStatus(id){
      this.$axios.get('api/drugDistribution/updateDrugStatus/'+id)
      .then(res=>{
        if (res.data.code === 200){
          this.$message.success("发药成功");
          this.queryCondition();
        } 
        
      })
    }
  },
  created() {
    this.queryDrugDistribution();
  }
}
</script>

<!-- -->
<style scoped>
/* 整体页面的字体和背景色 */
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #f8f8f8;
}

/* 表单元素和按钮的统一风格 */
.el-form,
.el-pagination {
  background-color: white;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* 提高表单项标签的可读性 */
.el-form-item__label {
  font-weight: 600;
}

/* 表格的样式调整 */
.el-table {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 表头字体加粗，背景淡化 */
.el-table th {
  font-weight: 600;
  background-color: #fafafa;
}

/* 清空按钮的样式 */
.el-button[type="info"] {
  color: #909399;
  border-color: #e2e2e2;
  background-color: #fff;
}

/* 按钮样式调整 */
.el-button {
  font-weight: 500;
  border: none;
}

/* 提交、确认按钮的颜色更鲜明 */
.el-button--success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.el-button--primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}

/* 分页器样式调整 */
.el-pagination {
  border-radius: 0; /* 分页器不使用圆角 */
}

/* 退药详情对话框的样式 */
.el-dialog__header {
  background-color: #eef1f6;
  color: #333;
}

/* 鼠标悬浮在行上的高亮效果 */
.el-table .el-table-row:hover {
  background-color: #eef1f6;
}

/* 列表空间优化，边距调整 */
.el-table-column {
  padding: 15px 0;
}

/* 美化操作栏的按钮，让它们靠右排列 */
.el-table-column[label="操作"] .cell {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}


</style>